{% extends "scm/base.html" %}

{% block content %}
<div class="container-fluid tender-page">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <div>
            <h3 class="mb-1">Tender / Vendor Bidding / Award</h3>
            <div class="text-muted">Step 1 — Form layout only</div>
        </div>
        <a href="{% url 'tender_list' %}" class="btn btn-secondary">Tender Register</a>
    </div>

    <form method="post" id="tenderForm">
        {% csrf_token %}

        <section class="tender-panel mb-4">
            <div class="panel-heading">1. Tender Header</div>
            <div class="panel-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label" for="tender_no">Tender No.</label>
                        <input class="form-control" id="tender_no" name="tender_no" value="" placeholder="Generated by system" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="tender_date">Tender Date</label>
                        <input class="form-control" id="tender_date" name="tender_date" type="date" value="">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="pr_id">PR No. *</label>
                        <select class="form-select" id="pr_id" name="pr_id">
                            <option value="">Select approved PR...</option>
                            {% for pr in approved_prs %}
                            <option value="{{ pr.id }}">{{ pr.pr_no }} — {{ pr.pr_title }}</option>
                            {% endfor %}
                        </select>
                        <small class="form-text text-muted">Only fully approved PRs will be selectable when the workflow is connected.</small>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="pr_title">Tender / PR Title</label>
                        <input class="form-control" id="pr_title" name="pr_title" value="" placeholder="Will be populated from selected PR" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="department">Department</label>
                        <input class="form-control" id="department" name="department" value="" placeholder="From PR" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="requester">Requester</label>
                        <input class="form-control" id="requester" name="requester" value="" placeholder="From PR" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="initiated_by">Lead Buyer</label>
                        <input class="form-control" id="initiated_by" name="initiated_by" value="" placeholder="Logged-in user" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="status">Status</label>
                        <input class="form-control" id="status" name="status" value="DRAFT" readonly>
                    </div>
                    <div class="col-12">
                        <label class="form-label" for="tender_remarks">Tender Remarks</label>
                        <textarea class="form-control" id="tender_remarks" name="tender_remarks" rows="2" placeholder="Optional notes"></textarea>
                    </div>
                </div>
            </div>
        </section>

        <section class="tender-panel mb-4">
            <div class="panel-heading">2. Vendor Bidding</div>
            <div class="panel-body">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                    <div class="text-muted">Vendor quotations will appear here after the tender header is connected.</div>
                    <button class="btn btn-secondary" type="button" disabled>+ Add Vendor Quotation</button>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered mb-0">
                        <thead>
                            <tr>
                                <th style="width:50px">No.</th>
                                <th>Vendor</th>
                                <th>Quotation No.</th>
                                <th>Currency</th>
                                <th class="text-end">Total Quotation</th>
                                <th>Technical</th>
                                <th>Commercial</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="8" class="text-center text-muted py-4">No vendor quotations recorded.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <section class="tender-panel mb-4">
            <div class="panel-heading">3. Award Recommendation & Approval</div>
            <div class="panel-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label" for="recommended_vendor">Recommended Vendor</label>
                        <select class="form-select" id="recommended_vendor" name="recommended_vendor" disabled>
                            <option value="">No eligible bid available</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="president_status">President Approval</label>
                        <input class="form-control" id="president_status" value="Not submitted" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="approval_date">Approval Date</label>
                        <input class="form-control" id="approval_date" type="date" value="" readonly>
                    </div>
                    <div class="col-12">
                        <label class="form-label" for="award_remarks">Award Justification</label>
                        <textarea class="form-control" id="award_remarks" name="award_remarks" rows="2" placeholder="Evaluation summary and justification" disabled></textarea>
                    </div>
                </div>
            </div>
        </section>

        <div class="d-flex gap-2 mb-4">
            <button type="button" class="btn btn-primary" disabled>Save Tender</button>
            <a href="{% url 'tender_list' %}" class="btn btn-outline-secondary">Cancel / Back</a>
        </div>
    </form>
</div>

<style>
.tender-page { padding-bottom: 24px; }
.tender-panel { background: #dee2e6; border-radius: 7px; padding: 10px; }
.panel-heading { font-size: 18px; font-weight: 600; padding: 8px 14px 12px; color: #17212b; }
.panel-body { background: #fff; border-radius: 4px; padding: 18px; }
.tender-panel .form-label { font-weight: 600; margin-bottom: 5px; }
.tender-panel .table thead th { background: #56636f; color: #fff; white-space: nowrap; }
.tender-panel .table td, .tender-panel .table th { vertical-align: middle; }
</style>

<script>
(function () {
    const prSelect = document.getElementById("pr_id");
    const titleInput = document.getElementById("pr_title");
    if (!prSelect || !titleInput) return;

    // Visual-only helper for Step 1. The authoritative PR data binding
    // will be implemented in the next step.
    prSelect.addEventListener("change", function () {
        const selected = prSelect.options[prSelect.selectedIndex];
        titleInput.value = prSelect.value ? selected.text.split(" — ").slice(1).join(" — ") : "";
    });
})();
</script>
{% endblock %}